<template>
  <div  style="display: flex;justify-content: center;align-items: center">
    <div :class="[dayModel===true&&bgColor===true?'lColor':'',dayModel===false?'bColor':'']" class=" nav-style" style="z-index: 99">
      <div>
        <a href="/" class="link-font" :style="dayModel===true&&bgColor===true?'color:black':'color:white'">Heaven</a>
      </div>
      <div class="myPosition" style="right: 4rem;display: flex;float: right !important;">
        <div @click="changeModel" type="text" size="mini" style="margin-right: 1rem" plain circle class="my-icon iconfont" :class="dayModel===true?'icon-moon':'icon-sun'"></div>
        <el-autocomplete @select="handleSelect" v-model="searchInfo" :fetch-suggestions="querySearch" prefix-icon="el-icon-search" style="border-radius: 10px;width: 200px"></el-autocomplete>
        <div class="myHover" style="display: flex;margin-left: 5rem">
          <div>
            <router-link to="/"  :class="[(dayModel===true&&bgColor===true)||((routerName!='index'&&routerName!='archive'&&routerName!='friendLink')&&dayModel===true)?'bFont':'',routerName==='index'?'active-link':'']" class="link-font1"><i class="el-icon-s-home"></i>首页</router-link>
          </div>
          <div>
            <router-link :to="{name:'type',query:{sId:-1}}" :class="[(dayModel===true&&bgColor===true)||((routerName!='index'&&routerName!='archive'&&routerName!='friendLink')&&dayModel===true)?'bFont':'',routerName==='type'?'active-link':'']" class="link-font1"><i class="el-icon-s-grid"></i>分类</router-link>
          </div>
          <div>
            <router-link :to="{name:'tag',query:{tId:-1}}"  :class="[(dayModel===true&&bgColor===true)||((routerName!='index'&&routerName!='archive'&&routerName!='friendLink')&&dayModel===true)?'bFont':'',routerName==='tag'?'active-link':'']" class="link-font1"><i class="el-icon-collection-tag"></i>标签</router-link>
          </div>
          <div>
            <router-link to="/archive"  :class="[(dayModel===true&&bgColor===true)||((routerName!='index'&&routerName!='archive'&&routerName!='friendLink')&&dayModel===true)?'bFont':'',routerName==='archive'?'active-link':'']" class="link-font1"><i class="el-icon-time"></i>归档</router-link>
          </div>
          <div>
            <router-link to="/friendLink"  :class="[(dayModel===true&&bgColor===true)||((routerName!='index'&&routerName!='archive'&&routerName!='friendLink')&&dayModel===true)?'bFont':'',routerName==='friendLink'?'active-link':'']" class="link-font1"><i class="el-icon-link"></i>友链</router-link>
          </div>
        </div>
      </div>
    </div>
    <div :style="toTopValue===true?'display:block':'display:none'" style="position: fixed;bottom: 2rem;right: 1rem;color: #171d20;z-index: 200">
      <el-button @click="toTop" circle class="el-icon-top"></el-button>
    </div>
  </div>

</template>

<script>
import axios from 'axios'
export default {
  name: "index",
  data() {
    return {
      searchInfo: '',
      blogInfo: [],
      bgColor: false,
      toTopValue: false
    }
  },
  mounted() {
    this.loadAll();
    window.addEventListener("scroll",this.handleScrollx,true)
  },
  computed: {
    dayModel(){
      return this.$store.state.dayModel;
    },
    routerName(){
      return this.$store.state.routerName;
    }
  },
  methods: {
    querySearch(queryString,cb) {
      var blogInfo = this.blogInfo;
      var results = queryString ? blogInfo.filter(this.createFilter(queryString)) : blogInfo;
      cb(results)
    },
    createFilter(queryString) {
      return (blogInfo) => {
        return (
            blogInfo.value.toLowerCase().indexOf(queryString.toLowerCase()) != -1
        );
      };
    },
    loadAll(){
      axios.get("/searchAllInfo").then( (res) => {
        let blogs = res.data;
        let blogtitle = [];
        for ( let item of blogs){
          blogtitle.push({'value':item.title,'id':item.id})
        }
        this.blogInfo = blogtitle;
      })
    },
    handleSelect(item){
     this.$router.replace({
       name: 'page',
       query: {
         id: item.id
       }
     })
    },
    changeModel() {
      let dayModel = !this.dayModel;
      this.$store.commit("setDayModel",dayModel);
    },
    toTop() {
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      // 实现滚动效果
      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 20);
    },
    handleScrollx() {
      if ( window.pageYOffset >= 500){
        this.toTopValue = true;
      }
      else {
        this.toTopValue = false
      }
      if ( window.pageYOffset != 0){
        this.bgColor = true;
      }
      else {
        this.bgColor = false;
      }
    }
  }
}
</script>

<style scoped>
.bFont {
  color: black !important;
}
.link-font {
  font-size: 30px;
  text-decoration: none;
  margin-left: 20px;
  display: inline-block;
}
.my-icon {
  color: gray;
}
.my-icon:hover {
  color: #646a7c;
  background-color: rgba(0,0,0,0);
  border-color: rgba(0,0,0,0);
}
.link-font1 {
  color: white;
  font-size: 20px;
  text-decoration: none;
  margin-right: 1.5rem;
  padding: .3rem 1rem;
}
.nav-style {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  line-height: 40px;
  padding: 20px 0;
  transition: all .5s linear;
}
.myHover>div>a:hover {
  border-bottom: #6d62db 2px solid;
}
.aCenter {
  text-align: center;
  line-height: 500px;
}
.active-link {
  border-bottom: #6d62db 2px solid;
}
.myPosition {
  position: absolute;
  max-width: 1180px;
  top: 25px;
}
</style>